<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true">

      <el-form-item label=" 操作模块">
        <el-input
          v-model="searchForm.title"
          placeholder=" 操作模块"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 业务类型">
        <el-input
          v-model="searchForm.businessType"
          placeholder=" 业务类型"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 请求方法">
        <el-input
          v-model="searchForm.method"
          placeholder=" 请求方法"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 方法耗时">
        <el-input
          v-model="searchForm.methodIntervalMs"
          placeholder=" 方法耗时"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 请求类型">
        <el-select
          v-model="searchForm.requestMethod"
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        >
          <el-option label="Get" value="GET" />
          <el-option label="Post" value="POST" />
          <el-option label="Put" value="PUT" />
          <el-option label="Delete" value="DELETE" />
        </el-select>
      </el-form-item>

      <el-form-item label=" 操作类别">
        <el-select
          v-model="searchForm.operatorType"
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        >
          <el-option label="其他" value="0" />
          <el-option label="后台用户" value="1" />
          <el-option label="手机端用户" value="2" />
          <el-option label="App" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label=" 操作人员">
        <el-input
          v-model="searchForm.operName"
          placeholder=" 操作人员"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 服务器ip地址">
        <el-input
          v-model="searchForm.serverIp"
          placeholder=" 服务器ip地址"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>
      <el-form-item label=" 请求url">
        <el-input
          v-model="searchForm.operUrl"
          placeholder=" 请求url"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 操作者ip">
        <el-input
          v-model="searchForm.operIp"
          placeholder=" 操作者ip"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 操作ip地址">
        <el-input
          v-model="searchForm.operLocation"
          placeholder=" 操作ip地址"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 接口参数">
        <el-input
          v-model="searchForm.operParam"
          placeholder=" 接口参数"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 接口返回参数">
        <el-input
          v-model="searchForm.jsonResult"
          placeholder=" 接口返回参数"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 接口状态">
        <el-select
          v-model="searchForm.status"
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        >
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label=" 错误信息">
        <el-input
          v-model="searchForm.errorMsg"
          placeholder=" 错误信息"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>

      <el-form-item label=" 操作时间">
        <el-date-picker
          v-model="searchForm.operTime"
          type="datetime"
          placeholder="选择日期时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="$col.paattern"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>
      <search-buttons
        :fetch-data="fetchList"
        :export-flag="false"
        :import-flag="false"
        :add-flag="false"
      />
      <el-tag style="margin-left:50px">双击单元格即可复制内容</el-tag>
    </el-form>
    <!--表格-->
    <el-table
      :data="tableData"
      border
      stripe
      @cell-dblclick="copyCellValue"
    >
      <el-table-column type="index" width="50" label="序号" fixed />
      <!--
        假设要将数据库中的数字变成对应的意思可以用下边的写法
         <el-table-column prop="sex" width="50" label="性别" >
            <template slot-scope="scope">
              <span v-if="scope.row.sex == '0'">女</span>
              <span v-if="scope.row.sex == '1'">男</span>
              <span v-if="scope.row.sex == '2'">保密</span>
            </template>
         </el-table-column>
      -->

      <el-table-column prop="title" width="200" label=" 操作模块" fixed />
      <el-table-column prop="businessType" label=" 业务类型">
        <template slot-scope="scope">
          <span v-if="scope.row.businessType == '0'">其他</span>
          <span v-if="scope.row.businessType == '1'">查询</span>
          <span v-if="scope.row.businessType == '2'">新增</span>
          <span v-if="scope.row.businessType == '3'">修改</span>
          <span v-if="scope.row.businessType == '4'">删除</span>
          <span v-if="scope.row.businessType == '5'">授权</span>
          <span v-if="scope.row.businessType == '6'">导出</span>
          <span v-if="scope.row.businessType == '7'">导入</span>
          <span v-if="scope.row.businessType == '8'">强退</span>
          <span v-if="scope.row.businessType == '9'">生成代码</span>
          <span v-if="scope.row.businessType == '10'">清空数据</span>
        </template>
      </el-table-column>
      <el-table-column prop="operTime" label=" 操作时间" width="150" fixed />
      <el-table-column prop="method" label=" 请求方法" show-overflow-tooltip width="300" fixed />
      <el-table-column prop="methodIntervalMs" label=" 方法耗时" fixed>
        <template slot-scope="scope">
          <span>{{ scope.row.methodIntervalMs }} ms</span>
        </template>
      </el-table-column>
      <el-table-column prop="requestMethod" label=" 请求类型" show-overflow-tooltip />
      <el-table-column prop="operatorType" label=" 操作类别">
        <template slot-scope="scope">
          <span v-if="scope.row.operatorType == '0'">其他</span>
          <span v-if="scope.row.operatorType == '1'">后台用户</span>
          <span v-if="scope.row.operatorType == '2'">手机端用户</span>
          <span v-if="scope.row.operatorType == '4'">App用户</span>
        </template>
      </el-table-column>
      <el-table-column prop="operName" label=" 操作人员" />
      <el-table-column prop="serverIp" label=" 服务器">
        <template slot-scope="scope">
          <span>{{ scope.row.serverIp }}:{{ scope.row.serverPort }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="operUrl" label=" 请求url" show-overflow-tooltip />
      <el-table-column prop="operIp" label=" 操作者ip" />
      <el-table-column prop="operLocation" label=" 操作地址" />
      <el-table-column prop="operParam" label=" 接口参数" show-overflow-tooltip />
      <el-table-column
        prop="jsonResult"
        label=" 返回参数"
        show-overflow-tooltip
      />
      <el-table-column prop="status" label=" 接口状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">正常</span>
          <span v-if="scope.row.status == '1'">异常</span>
        </template>
      </el-table-column>
      <el-table-column prop="errorMsg" label=" 错误信息" show-overflow-tooltip />

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <operation-buttons
            :row="scope.row"
            :del-fun="delSysOperationLogById"
            :show-edit="false"
            :show-del="false"
          />
        </template>
      </el-table-column>
    </el-table>
    <div>
      <!-- 分页 -->
      <pagination
        :page.sync="searchForm.currentPage"
        :total="total"
        :limit.sync="searchForm.pageSize"
        @pagination="fetchList"
      />
    </div>
  </div>
</template>
<script>
import sysOperationLog from '@/api/sysOperationLog'
import Pagination from '@/components/Pagination/index'
import SearchButtons from '@/components/SearchButtons/index'
import OperationButtons from '@/components/OperationButtons/index'

export default {
  components: {
    Pagination,
    SearchButtons,
    OperationButtons
  },
  data() {
    return {
      name: 'SysOperationLog',
      searchForm: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      tableData: []
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    copyCellValue(row, column, cell, event) {
      if (event.type === 'dblclick') {
        var save = function(e) {
          e.clipboardData.setData('text/plain', cell.textContent)
          e.preventDefault()// 阻止默认行为
        }
        document.addEventListener('copy', save)
        document.execCommand('copy')
        document.removeEventListener('copy', save)
      }
      this.$message({ message: `复制成功:\n ${cell.textContent}`, type: 'success' }) // 加提示
      console.log(row, column, cell, event)
    },
    fetchList() {
      sysOperationLog.fetchList({ ...this.searchForm }).then(resp => {
        this.tableData = resp.data.data
        this.total = resp.data.total
        this.searchForm.pageNum = resp.data.pageNum
        this.searchForm.currentPage = resp.data.currentPage
      })
    },
    delSysOperationLogById(id) {
      sysOperationLog.delById(id).then(resp => {
        this.$message.info(resp.message)
      })
    },
    clearSearchForm() {
      this.searchForm = {}
    },
    downloadTemplate() {
      window.location.href = 'http://localhost:9527/sysOperationLog/template'
    },
    export2Excel() {
      sysOperationLog.export2Excel({ ...this.searchForm })
    }
  }
}
</script>
<style>

</style>
